<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-control" content="no-cache,must-revalidate" />
    <meta http-equiv="Cache" content="no-cache" />
    <title>登录</title>
    <link rel="stylesheet" href="__STATIC__static/element-ui/element-ui@2.15.10.min.css" />
    <script>
      document.write(`<link rel="stylesheet" href="__STATIC__css/login.css?v=${Date.now()}">`, )
      window.APP_PROJECT="modules/xsrc";window.GTXY_VERSION=1726277890818;window.APP_ENV="dev";
    </script>
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="app-body">
        <div class="container">
          <el-form v-show="tab === 'login'" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <img src="__STATIC__assets/logo.png" class="logo" alt="" />
            <el-form-item class="form-item" prop="username">
              <el-input v-model="loginForm.username" autocomplete="off" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item class="form-item" prop="password">
              <el-input v-model="loginForm.password" ref="loginPwd" :type="loginPwdShow ? 'text' : 'password'" placeholder="请输入密码" autocomplete="off">
                <div slot="suffix" class="show-pwd-btn" @click="toggleShowPwd('loginPwd')">
                  <img v-show="loginPwdShow" src="__STATIC__assets/open-eye.png" alt="" />
                  <img v-show="!loginPwdShow" src="__STATIC__assets/close-eye.png" alt="" />
                </div>
              </el-input>
            </el-form-item>
            <el-form-item class="form-item" prop="verify">
              <div class="code-row">
                <el-input v-model="loginForm.verify" autocomplete="off" id="J_code" placeholder="验证码"></el-input>
                <img :src="verifyUrl.login" alt="" class="image-code"  @click="getCode" /> 
              </div>
            </el-form-item>
            <div class="handle-row" style="margin: 19px 0 0px;">
             
            </div>
            <el-button class="submit-btn" :loading="loading" @click="login">立即登录</el-button>
          </el-form>
          
        </div>
      </div>

      <!--  底部  -->
      <div class="app-footer">
        <!-- <span>Copyright © 2018-2023 All Rights Reserved.</span> -->
      </div>
    </div>
  </body>
  <script src="__STATIC__jquery.min.js"></script> 
  <script src="__STATIC__js/layer/layer.js"></script> 
  <script src="__STATIC__static/vue/vue@2.6.14.min.js"></script>
  <script src="__STATIC__static/element-ui/element-ui@2.15.10.min.js"></script>
  <script src="__STATIC__static/require/require@2.3.6.min.js"></script>

  <script>
    require.config({
      urlArgs: `v=${Date.now()}`,
      paths: {
        axios: '__STATIC__static/axios/axios@1.2.0.min',
        CryptoJS: '__STATIC__static/crypto-js/crypto-js@4.1.1.min',
        common: '__STATIC__js/base/common',
        util: '__STATIC__js/base/util',
        api: '__STATIC__js/base/api',
        request: '__STATIC__js/base/request',
        storage: '__STATIC__js/base/storage',
      }
    });
    require(['common', 'util', 'storage', 'api', 'request'], function (common, util, storage, api, request) {
      new Vue({
        el: '#app',
        data() {
          return {
            loading: false,
            tab: 'login', // 页面内容， login | forgetPwd | register
            loginPwdShow: false,
            registerPwdShow: false,
            registerRePwdShow: false,
            verifyUrl: { // 图片验证码地址
              login: "",
              forgetPwd: "",
              register: "",
            },
            loginForm: {
              username: '', // 账号
              password: '', // 密码
              verify: '', // 图片验证码值
              uuid: '', // 图片验证码的uuid
            },
            loginRules: {
              // username: [{ required: true, trigger: 'blur', message: '请输入邮箱/用户名' }],
              // password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
              // verify: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
            },
            forgetPwdForm: {
              email: '',
              username: '',
              verify: '',
              uuid: '',
            },
            forgetPwdRules: {
              // email: [{ required: true, trigger: 'blur', message: '请输入邮箱地址' }],
              // username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
              // verify: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
            },
            registerForm: {
              email: '',
              username: '',
              password: '',
              rePassword: '',
              verify: '',
              uuid: '',
            },
            registerRules: {
              // email: [{ required: true, trigger: 'blur', message: '请输入邮箱地址' }],
              // username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
              // password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
              // rePassword: [{ required: true, trigger: 'blur', message: '请再输入一次密码' }],
              // verify: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
            },
          };
        },
        watch: {},
        created() {
          this.getCode();
        },
        methods: {
          getCode() {
            const tab = this.tab;
            const formKey = tab + 'Form'; 
            // TODO 获取图片验证码 及 uuid
            console.log( "{:U('login/verify')}" );
            this.verifyUrl[tab] = "{:U('login/verify')}&tab=a" + tab +"&key=" + new Date().getTime(); 
          },
          // 切换显隐密码
          toggleShowPwd(ref) {
            const showKey = ref + 'Show';
            let formKey;
            let formValue;
            switch (ref) {
              case 'loginPwd':
                formKey = 'loginForm';
                formValue = 'password';
                break;
              case 'registerPwd':
                formKey = 'registerForm';
                formValue = 'password';
                break;
              case 'registerRePwd':
                formKey = 'registerForm';
                formValue = 'rePassword';
                break;
              default:
                return;
            }
            this[showKey] = !this[showKey];
            const password = this[formKey][formValue];
            this[formKey][formValue] = '';
            this.$refs[ref].focus();
            this.$nextTick(() => {
              this[formKey][formValue] = password;
            });
          },
          toTab(key) {
            const formKey = key + 'Form';
            this.resetForm(formKey);
            this.tab = key;
            this.getCode();
          },
          resetForm(key) {
            Object.keys(this[key]).forEach((k) => {
              this[key][k] = '';
            });
          },
          // 登录
          login() {
            this.$refs.loginForm.validate((valid, obj) => {
              if (valid) {
                this.loading = true;
                // TODO 登录
                console.log(this.loginForm);
                request.post("{:U('login/login')}", this.loginForm).then((res) => {
                  console.log('res', res)
                  if(res.code == 200){
                	  layer.msg(res.msg,{icon:1,time:2000,
				    		end:function(){
				    			window.location.href =res.url;
			    			}
					    });  
                  }else{
					layer.msg(res.msg,{icon:2,time:2000, end:function(){  
						var url = "{:U('login/verify')}&tab=alogin&key=" + new Date().getTime();  
						$(".image-code").attr("src", url); 
						$("#J_code").val(""); 
						}
                  	});
				  }
                }).catch((err) => {
                  console.log('err', err)
                });
                this.loading = false;
              } else {
                console.log(obj);
              }
            });
          },
          // 忘记密码
          forgetPwd() {
            this.$refs.forgetPwdForm.validate((valid, obj) => {
              if (valid) {
                this.loading = true;
                // TODO 忘记密码
                console.log(this.forgetPwdForm); 
                request.post("{:U('Forget/find')}", this.forgetPwdForm).then((res) => {
                    console.log('res', res) 
                    if(res.code == 200){
                    	layer.msg(res.msg,{icon:1,time:2000,
				    		end:function(){
				    			window.location.href =res.url;
			    			}
					    });  
                    }else{
                      	layer.msg(res.msg,{icon:2,time:2000});
                    }
                  }).catch((err) => {
                    console.log('err', err)
                  });
                  this.loading = false; 
              } else {
                console.log(obj);
              }
            });
          },
          // 注册
          register() {
            this.$refs.registerForm.validate((valid, obj) => {
              if (valid) {
                this.loading = true;
                // TODO 注册
                console.log(this.registerForm);
                request.post("{:U('Reg/add')}", this.registerForm).then((res) => {
                    console.log('res', res) 
                    if(res.code == 200){
                    	layer.msg(res.msg,{icon:1,time:2000,
				    		end:function(){
				    			window.location.href =res.url;
			    			}
					    });  
                    }else{
    					layer.msg(res.msg,{icon:2,time:2000});
                      }
                  }).catch((err) => {
                    console.log('err', err)
                  });
                  this.loading = false; 
              } else {
                console.log(obj);
              }
            });
          },
        }
      });
    });
  </script>
</html>
